<template>
  <div class="all">
    <!--搜索区域-->
    <div style="margin: 10px 0">
      <el-input
        v-model="search"
        placeholder="请输入内容要搜索的姓名"
        style="width: 20%"
        clearable
      ></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load()"
        >查询</el-button
      >
      <el-button @click="addUser()" type="primary" size="small">添加</el-button>
    </div>
    <el-table :data="pagination.records" border>
      <el-table-column
        fixed="left"
        prop="username"
        label="姓名"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        width="120"
      ></el-table-column>
      <el-table-column prop="email" label="邮箱" width="120"></el-table-column>
      <el-table-column
        prop="identityType"
        label="身份"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="roleType"
        label="角色"
        width="120"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="updateUser(scope.row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-button
            @click="deleteById(scope.row.id)"
            type="danger"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[6, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="page"
    >
    </el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <section class="update">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.nickname"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="身份">
            <el-input v-model="form.identityType"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="form.roleType"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserManager',
  data() {
    return {
      pagination: {
        //分页后的考试信息
        current: 1, //当前页
        total: null, //记录条数
        size: 6, //每页条数
      },
      allUser: null,
      search: null,
      title: '',
      dialogVisible: false, //对话框
      form: {}, //保存点击以后当前试卷的信息
    }
  },
  // methods: {
  //   initRole() {
  //     if (!window.sessionStorage.getItem('user')) {
  //       this.$message.error('请先进行登录!')
  //       this.$router.push({ path: '/' })
  //     }

  //     var a = JSON.parse(window.sessionStorage.getItem('user'))

  //     if (a.roleType == 1 || a.roleType == 2) {
  //       this.$message.error('权限不足!')
  //       this.$router.push({ path: '/' })
  //     }
  //   },
  // },
  methods: {
    getUserInfo() {
      if (!window.sessionStorage.getItem('user')) {
        this.$message.error('请先进行登录!')
        this.$router.push({ path: '/' })
      }

      var a = JSON.parse(window.sessionStorage.getItem('user'))

      if (a.roleType == 1 || a.roleType == 2) {
        this.$message.error('权限不足!')
        this.$router.push({ path: '/' })
      }
      //分页查询所有试卷信息
      this.$axios(
        `/user/findAll/${this.pagination.current}/${this.pagination.size}`
      )
        .then((res) => {
          this.pagination = res.obj
        })
        .catch((error) => {})
    },
    //改变当前记录条数
    handleSizeChange(val) {
      this.pagination.size = val
      this.getUserInfo()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getUserInfo()
    },
    updateUser(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
      this.title = '编辑用户信息'
    },
    submit() {
      //提交更改
      this.dialogVisible = false
      if (this.form.id != null) {
        this.$axios({
          url: '/user/update',
          method: 'put',
          data: {
            ...this.form,
          },
        }).then((res) => {
          console.log(res)
          if (res.obj.code == 200) {
            this.$message({
              message: '更新成功',
              type: 'success',
            })
          }
          this.getUserInfo()
        })
      } else {
        this.$axios({
          url: '/user/add',
          method: 'post',
          data: {
            ...this.form,
          },
        }).then((res) => {
          console.log(res)
          if (res.obj.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success',
            })
          }
          this.getUserInfo()
        })
      }
    },
    handleClose(done) {
      //关闭提醒
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    deleteById(id) {
      //删除用户信息
      this.$confirm('确定删除当前用户信息吗？删除后无法恢复', 'Warning', {
        confirmButtonText: '确定删除',
        cancelButtonText: '算了,留着吧',
        type: 'danger',
      })
        .then(() => {
          //确认删除
          this.$axios({
            url: `/user/delete/${id}`,
            method: 'delete',
          }).then((res) => {
            this.getUserInfo()
          })
        })
        .catch(() => {})
    },
    addUser() {
      this.dialogVisible = true
      this.form = {}
      this.title = '添加用户信息'
    },
    load() {
      let url =
        '/user/findPage/?currentPage=' +
        this.pagination.current +
        '&size=' +
        this.pagination.size
      if (this.search) {
        url += '&username=' + this.search
      }
      this.getRequest(url).then((res) => {
        if (res) {
          this.pagination.records = res.data
          this.pagination.total = res.total
        }
      })
    },
  },
  created() {
    // this.initRole()
    this.getUserInfo()
  },
}
</script>

<style>
.all {
  padding: 0px 40px;
}
</style>